<template>
	<div :class="isIndex? 'indexStyle headerWrapper' : 'headerWrapper' ">
		<div class="headerContent clearFix scregular">
			<div class="floatl">
				<router-link to="/"><img src="../../../../static/img/header/logo.png" alt="logo"></router-link>
			</div>
			<div :class="jianceSelected? 'floatl ml100 cursor check checking relative headerSelected' : 'floatl ml100 cursor check checking relative'" v-show="isLogin">
				<span class="cursor ">
					{{checkedVal}}
					<i class="el-icon-arrow-down"></i>
				</span>
				<div class="checkChange">
					<ul>
						<router-link to="/textCheck"><li class="wengao" @click="setCheck('文字检测')">文字检测</li></router-link>
						<router-link to="/imgCheck"><li class="tuxiang" @click="setCheck('图片检测')">图片检测</li></router-link>
						<router-link to="/urlCheck"><li class="lianjie" @click="setCheck('网站检测')">网站检测</li></router-link>
						<!--<router-link to="/shopCheck"><li class="dianpu" @click="setCheck('店铺检测')">店铺检测</li></router-link>-->
					</ul>
				</div>
			</div>
			<div class="floatl ml30 cursor" v-show="isLogin">
				<router-link to="/record"><div :class="jiluSelected?'checking cwhite headerSelected':'checking cwhite'" @click="setCheck('检测')">记录</div></router-link>
			</div>
			<div class="floatl ml30 cursor" v-show="isLogin">
				<router-link to="/setting"><div :class="shezhiSelected?'checking cwhite headerSelected':'checking cwhite'" @click="setCheck('检测')">设置</div></router-link>
			</div>
			<div class="floatr" v-show="!isLogin">
				<div class="login floatl" @click="dialogLogin = true">
					登录
				</div>
				<div class="login floatl" @click="dialogLogin = true">
					注册
				</div>
			</div>
			<div class="floatr" v-show="isLogin">
				<div class="login floatl">
					<!--<i class="el-icon-bell"></i>
					{{userName}}
					<i class="el-icon-caret-bottom"></i>-->
					<el-dropdown trigger="click" @command="loginout">
					  <span class="el-dropdown-link cwhite">
					    <i class="el-icon-bell"></i>
					{{userName}}
					<i class="el-icon-caret-bottom"></i>
					  </span>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item  command="a">
					      	退出
					    </el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
				</div>
				
			</div>
		</div>
		<!--登录开始-->
		<el-dialog  :visible.sync="dialogLogin" :lock-scroll= "false" width="400px"  :modal-append-to-body="false">
			<div class="loginTitle">
				短信验证码登录
				<i class="el-icon-close loginClose" @click="dialogLogin = false"></i>
			</div>
			<div class="mains boradiu bgcwhite pd30 pt0">
				<el-form ref="register" :model="register">
					<div class="el-form-item mt30" autocomplete="off" tip="请输入手机号">
						<input id="phone" v-model="register.mobile" autocomplete="off" placeholder="请输入手机号" name="phone" type="text" class="el-input__inner">
					</div>
					<div class="el-form-item passone relative" autocomplete="off" tip="请输入密码">
						<input id="passone" v-model="register.code" placeholder="请输入图形验证码" name="passone" autocomplete="off" tip="请输入验证码" class="el-input__inner">
						<el-button class="yzmbutton code" @click="createCode" v-text="code"></el-button>
					</div>
					<div class="el-form-item passone relative" autocomplete="off" tip="请输入密码">
						<input id="passone" v-model="register.password" placeholder="请输入验证码" name="passone" autocomplete="off" tip="请输入验证码" class="el-input__inner">
						<el-button type="primary" class="yzmbutton" @click="getCode()">获取验证码</el-button>
						<el-button type="primary" class="yzmbutton" v-show="timershow">{{count}}s后重新发送</el-button>
					</div>
					<el-button type="primary" class="w100" @click="login()">登录</el-button>
				</el-form>
			</div>
			<!--<div class="loginBottom">
				<p>第三方账号登录</p>
				<div class="clearFix">
					<div class="floatl loginIcon taobao"></div>
					<div class="floatl loginIcon jingdong"></div>
				</div>
			</div>-->
		</el-dialog>
		<!--登录结束-->
	</div>
</template>

<script>
	import API from "@/api"
	import MsgBus from '@/components/bus.js';
	export default {
		computed: {
		   
		},
		created: function(){
			
		},
		mounted:function(){
			if(this.$route.path == "/"){
				this.isIndex = true;
				sessionStorage.setItem("checkType","检测")
			}
			if(sessionStorage.getItem("checkType")){
				this.checkedVal = sessionStorage.getItem("checkType")
			}
			this.initHeader();
			this.setSelected(this.$route.path);
			this.createCode();
			MsgBus.$on('loginEvent',(type) => {
				this.dialogLogin=true;
				this.loginType = type;
			});
		},
		watch: {
		    //监听路由
		    $route: {
		        handler: function (val, oldVal) {
		        	var url = val.path; //新路径
					if(url == "/"){
						this.isIndex = true
						this.checkedVal = "检测"
					}else{
						this.isIndex = false
					}
					this.setSelected(url);
		        },
		        //深度观察监听
		        deep: true
		    }
		},
	    data: function () {
	        return {
	        	checkedVal: "文字检测",
	        	loginShow: true,
	 			dialogLogin: false,
	 			dialogRegister: false,
	 			form: {
			          name: '',
			          region: '',
			          date1: '',
			          date2: '',
			          delivery: false,
			          type: [],
			          resource: '',
			          desc: ''
			        },
			    register:{
					mobile: '',
					password: '',
					password1: '',
					captcha: '',
					code:''
				},
				checked: "",
				timer: null,
				timershow: false,
				count: '',
				isLogin: false,
				userName: 'feifei',
				isIndex: false,
				jianceSelected: false,
				jiluSelected: false,
				shezhiSelected: false,
				code: "",
				loginType: ""

	        }
	    },
	    methods:{
	    	createCode:function() {
		        var code = "";
		        var codeLength = 4; //验证码的长度
		        var checkCode = document.getElementById("checkCode");
		        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 
		        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
		        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
		        for (var i = 0; i < codeLength; i++) 
		        {
		            var charNum = Math.floor(Math.random() * 52);
		            code += codeChars[charNum];
		        }
		        this.code = code.toLowerCase();
		    },
	    	initHeader: function(){
	    		if(localStorage.getItem("outTime")&&localStorage.getItem("phone")){
	    			var outTime = localStorage.getItem("outTime");
	    			var currentTime = new Date().getTime();
//	    			console.error((currentTime-outTime)/1000)
	    			if((currentTime-outTime)/1000>1800){
	    				this.isLogin = false;
	    			}else{
	    				this.userName=localStorage.getItem("phone");
	    			}
	    		}
	    		if(API.header.getCookie("token")){
	    			this.isLogin = true;
	    			this.userName = API.header.getCookie("phone")
	    		}else{
	    			this.$router.push({
				      name: '/',
				    })
	    		}
	    	},
	    	login: function(){
//	    		console.error(process.env.API_ROOT)
	    		if(this.checkMoble()){
	    			if(this.isYanzhengma(this.register.password)){
	    				var loginInfo = {"mobile":this.register.mobile,"password":this.register.password}
	    				
//	    				API.header.login(params, API.header.getCookie("token")).then(({data}) => {
	    				API.header.login(loginInfo).then(({data}) => {
					       if(data.code=='0'){
	    						this.$message.success('登录成功');
	    						this.dialogLogin = false;
	    						this.isLogin = true;
	    						this.userName = this.register.mobile;
	    						API.header.setCookie("token", data.token, { expires: 1, path:'/', secure: false});
	    						API.header.setCookie("phone", this.register.mobile, { expires: 1, path:'/', secure: false});
					       		localStorage.setItem("token",data.token)
					       		localStorage.setItem("phone",this.register.mobile)
					       		if(this.loginType){
					       			this.$router.push({
								      name: this.loginType,
								    })
					       		}
					       }else{
	    						this.$message.error(data.msg);
					       }
				        })
	    			}else if(this.register.password == ''){
	    				this.$message.error('验证码不能为空');
	    			}else{
	    				this.$message.error('验证码格式不正确');
	    			}
	    		}
	    	},
	    	getCode: function(){
	    		if(this.checkMoble()){
	    			if(this.code != (this.register.code).toLowerCase()){
	    				this.$message.error("图形验证码不正确");
	    				return false;
	    			}
	    			API.header.getCode(this.register.mobile).then(({data}) => {
			  			if(data.code == 0  && data.msg == "OK"){
				   			//倒计时去吧
					   		this.sendcode()
					   	}else{
					   		this.$message.error(data.msg);
					   	}
			  		})
	    		}
	    	},
	    	sendcode: function() { //发送验证码倒计时
			 	const TIME_COUNT = 120;
			    if (!this.timer) {
			       this.count = TIME_COUNT;
			       this.timershow = true;
			       this.timer = setInterval(() => {
			       if (this.count > 0 && this.count <= TIME_COUNT) {
			         this.count--;
			        } else {
			         this.timershow = false;
			         clearInterval(this.timer);
			         this.timer = null;
			        }
			       }, 1000)
			    }
			},
	    	isMobile: function (s) {
			  return /^((\+?86)|(\(\+86\)))?(1[0-9]{10})$/.test(s)
			},
			isYanzhengma: function(s){
			  return /^\d{5}$/.test(s)
			},
			checkMoble: function() {
				if(this.register.mobile == ""){
	    			 this.$message.error('手机号不能为空');
	    			 return false;
	    		}else if(!this.isMobile(this.register.mobile)){
	    			this.$message.error('手机号不正确');
	    			 return false;
	    		}else{
	    			return true;
	    		}
			},
			setCheck: function(val){
				this.checkedVal = val;
				sessionStorage.setItem("checkType",val)
			},
			loginout: function() {
				API.header.delCookie("token");
				this.$router.push({
			      name: '/',
			   });
			   sessionStorage.clear();
			   this.$router.go(0)
			},
			setSelected: function(url){
				if(url.indexOf("img")!=-1 || url.indexOf("text")!=-1 || url.indexOf("url")!=-1){
					this.jianceSelected = true;
					this.jiluSelected = false;
					this.shezhiSelected = false;
					if(url.indexOf("img")!=-1){
						this.checkedVal = "图片检测"
					}else if(url.indexOf("text")!=-1){
						this.checkedVal = "文字检测"
					}else if(url.indexOf("url")!=-1){
						this.checkedVal = "网站检测"
					}
				}else if(url.indexOf("record")!=-1){
					this.jiluSelected = true;
					this.jianceSelected = false;
					this.shezhiSelected = false;
				}else if(url.indexOf("setting")!=-1){
					this.shezhiSelected = true;
					this.jianceSelected = false;
					this.jiluSelected = false;
				}
			}
	    	
	    }
	  
	}
</script>

<style scoped>
	@import "./header.css"
</style>